import React from 'react';

import style from './Draw.module.scss';

const {L} = window;
const {BASE_URL} = window.CONFIG;

let drawLayer = null;
let pointLayer = null;

const Draw = (props) => {
    const {map} = props;

    const draw = () => {
        clear();
        map.dragging.disable();
        map.on('mousedown', (e1) => {
            drawLayer = new L.rectangle([e1.latlng, e1.latlng], {color: "#ff7800", weight: 1}).addTo(map);
            map.on('mousemove',(e2) => {
                drawLayer.setBounds([e1.latlng,e2.latlng])
            });
            map.on('mouseup', (e3) => {
                let myIcon = L.icon({
                    iconUrl: `${BASE_URL}/images/close.png`,
                    iconSize: [30, 30],
                    iconAnchor: [15, 15],
                    popupAnchor: [0, -0],
                    shadowSize: [0, 0],
                    shadowAnchor: [0, 0]
                });
                pointLayer = L.marker(e3.latlng, {icon: myIcon}).on('click', () => clear()).addTo(map);
                
                map.dragging.enable();
                map.off('mousedown');
                map.off('mousemove');
                map.off('mouseup');
                // 触发搜索事件

            });
        });
    };

    const clear=  () => {
        if(!map) return;

        if(drawLayer) {
            map.removeLayer(drawLayer);
            drawLayer = null;
        }

        if(pointLayer){
            map.removeLayer(pointLayer);
            pointLayer = null
        }
    };

    return (
        <div className={style.draw} onClick={draw}>绘制矩形</div>
    )
};

export default Draw;